<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>SPRINGBOOT上传图片到七牛云</title>
    <style>
        #dropbox {
            width: 100px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            border: 2px dashed #999;
            border-radius: 5px;
            background: #fbfbfb;
            color: #666;
        }

        #preview > img {
            height: 80px;
            margin: 7px;
            border: 1px solid #666;
            border-radius: 4px;
            box-shadow: 3px 3px 3px #bbb;
        }

        #outbox {
            display: inline-block;
            position: relative;
            overflow: hidden;
        }

        #imgUpload {
            position: absolute;
            left: 40%;
            font-size: 60px;
            opacity: 0;
        }
    </style>

</head>
<body>
<div align="center">
    <form th:action="@{~/uploadPictures}"
          method="post" enctype="multipart/form-data">
        <div id="outbox">
            <input type="submit" value="提交"/>
            <div id="dropbox">
                <input id="imgUpload" type="file" multiple name="files">
                <span>选取图片</span>
            </div>
        </div>
        <div id="preview"></div>
    </form>
</div>
<script type="text/javascript">
    var dropbox, imgUpload;
    dropbox = document.getElementById("dropbox");
    dropbox.addEventListener("dragenter", dragenter, false);
    dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("dragleave", dragleave, false);
    dropbox.addEventListener("drop", drop, false);
    imgUpload = document.getElementById("imgUpload");
    imgUpload.addEventListener("change", readFile, false)
    console.log(imgUpload)
    // 目标进入drop区域
    function dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
        dropbox.style.background = '#666'
    }

    // 目标位于drop区域上方
    function dragover(e) {
        e.stopPropagation();
        e.preventDefault();
    }

    // 目标离开drop区域
    function dragleave(e) {
        e.stopPropagation();
        e.preventDefault();
        dropbox.style.background = '#fbfbfb';
    }

    // 目标在drop区域被释放/放置（松开鼠标）
    function drop(e) {
        e.stopPropagation();
        e.preventDefault();
        dropbox.style.background = '#fbfbfb';
        var dt = e.dataTransfer;
        var files = dt.files;
        handleFiles(files);
    }

    // 点击上传按钮后的方法
    function readFile() {
        handleFiles(this.files);
    }

    // 显示缩略图的方法
    function handleFiles(files) {
        console.log(files)
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /^image\//;
            // 自动过滤非图片文件
            if (!imageType.test(file.type)) {
                continue;
            }
            // 创建img对象并加入到页面中
            var img = document.createElement("img");
            preview.appendChild(img);
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = (function (aImg) {
                return function (e) {
                    aImg.src = e.target.result;
                };
            })(img);
        }
    }
</script>
</body>
</html>